<template>
  <div>
    <div style="padding-top: 10px">
      <el-button
        style="margin-left: 20px; padding-top: 10px"
        type="primary"
        @click="dialogVisible = true"
      >
        添加家庭组
      </el-button>
      <el-form
        ref="ruleForm"
        class="demo-ruleForm"
        label-width="100px"
        :model="ruleForm"
      >
        <div style="display: flex; padding-top: 10px">
          <el-form-item label="家庭组" prop="region">
            <el-select
              v-model="ruleForm.Family"
              placeholder="请选家庭组"
              style="margin-left: 10px"
              @change="FamilyChange"
            >
              <el-option
                v-for="(item, index) in FamilyOptions"
                :key="index"
                :label="item.group_name"
                :value="item.group_id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="联系人" prop="region">
            <el-select
              v-model="ruleForm.contacts"
              placeholder="请选联系人"
              style="margin-left: 10px"
              @change="contactsChange"
            >
              <el-option
                v-for="item in contactsOptions"
                :key="item.id"
                :label="item.cus_name"
                :value="item.cus_name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="选择宝宝" prop="region">
            <el-select
              v-model="ruleForm.user"
              :placeholder="'请选' + langs.page.member"
              style="margin-left: 10px"
              @change="userChange"
            >
              <el-option
                v-for="item in userOptions"
                :key="item.id"
                :label="item.nick_name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </div>
        <div>
          <el-button style="margin-left: 20px" type="primary" @click="addTest">
            添加预约项+
          </el-button>

          <table v-if="forms.length != 0" class="tftable" style="width: 98%">
            <thead>
              <tr>
                <td colspan="1" style="width: 10%">预约科室</td>
                <td colspan="1" style="width: 10%">选择岗位</td>
                <td colspan="1" style="width: 10%">预约医生</td>
                <td colspan="1" style="width: 10%">预约商品</td>
                <td colspan="1" style="width: 10%">预约金</td>
                <td colspan="1" style="width: 10%">预约日期</td>
                <td colspan="1" style="width: 10%">预约时间段</td>
                <td colspan="1" style="width: 10%">推迟时间</td>
                <td colspan="1" style="width: 10%">删除</td>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in forms" :key="index">
                <td>
                  <el-select
                    v-model="item.dept_id"
                    :placeholder="'预约' + langs.page.dept"
                    style="width: 100%"
                    @change="handleChange"
                  >
                    <el-option
                      v-for="items in DepartmentOptions"
                      :key="items.id"
                      :label="items.dept_name"
                      :value="items.id"
                    />
                  </el-select>
                </td>
                <td>
                  <el-select
                    v-model="item.group_id"
                    placeholder="请选岗位"
                    style="width: 100%"
                    @change="positionChange"
                  >
                    <el-option
                      v-for="items in positionOptions"
                      :key="items.id"
                      :label="items.group_name"
                      :value="items.id"
                    />
                  </el-select>
                </td>
                <td>
                  <el-select
                    v-model="item.res_user_id"
                    :placeholder="'请选预约' + langs.page.user"
                    style="width: 100%"
                    @change="doctorChange"
                  >
                    <el-option
                      v-for="items in doctorOptions"
                      :key="items.user_id"
                      :label="items.real_name"
                      :value="items.user_id"
                      @click.native="doctorChange(index, items.user_id)"
                    />
                  </el-select>
                </td>
                <td>
                  <el-select
                    v-model="item.goods_id"
                    placeholder="请选预约商品"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="items in commodityOptions"
                      :key="items.id"
                      :label="items.goods_name"
                      :value="items.id"
                      @click.native="commodityChange(index, items.id)"
                    />
                  </el-select>
                </td>
                <td>
                  <el-input
                    v-model="item.res_fee"
                    :disabled="true"
                    placeholder="预约金"
                    style="width: 100%"
                  />
                </td>
                <td>
                  <el-select
                    v-model="item.res_date"
                    placeholder="请选预约日期"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="items in itemDataOptions"
                      :key="items.scheduling_date"
                      :label="items.scheduling_date"
                      :value="items.scheduling_date"
                      @click.native="
                        itemDataChange(index, items.scheduling_date)
                      "
                    />
                  </el-select>
                </td>
                <td>
                  <el-select
                    v-model="item.res_time"
                    placeholder="请选预约时间段"
                    style="width: 100%"
                    @change="timeSlotChange"
                  >
                    <el-option
                      v-for="items in timeSlotOptions"
                      :key="items"
                      :label="items"
                      :value="items"
                    />
                  </el-select>
                </td>
                <td>
                  <el-select
                    v-model="item.allow_time"
                    placeholder="推迟时间"
                    style="width: 100%"
                    @change="delayChange"
                  >
                    <el-option
                      v-for="(items, indexs) in delayOptions"
                      :key="indexs"
                      :label="items.label"
                      :value="items.value"
                    />
                  </el-select>
                </td>
                <td>
                  <el-button type="danger" @click.prevent="deleteTest(index)">
                    删除
                  </el-button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div style="display: flex; margin-top: 10px">
          <el-form-item label="预约类型" prop="region">
            <el-select
              v-model="ruleForm.res_create_type"
              placeholder="请选择预约类型"
              style="margin-left: 10px"
              @change="reservationSourceChange"
            >
              <el-option
                v-for="(item, index) in reservationSourceOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="预约来源" prop="region">
            <el-select
              v-model="ruleForm.appointment"
              placeholder="请选择预约来源"
              style="margin-left: 10px"
              @change="appointmentChange"
            >
              <el-option
                v-for="(item, index) in appointmentOptions"
                :key="index"
                :label="item.source_name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="小票" prop="region">
            <el-select
              v-model="ruleForm.has_print"
              placeholder="是否打印小票"
              style="margin-left: 10px"
              @change="printChange"
            >
              <el-option
                v-for="(item, index) in PrintOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="短信通知" prop="region">
            <el-select
              v-model="ruleForm.message"
              placeholder="是否短信通知"
              style="margin-left: 10px"
              @change="messageChange"
            >
              <el-option
                v-for="(item, index) in messageOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>
        <div style="display: flex; margin-left: 30px">
          <div>
            <el-form-item label="	预约单备注：">
              <el-input
                v-model="form.remark"
                placeholder="请输入内容"
                :rows="2"
                type="textarea"
              />
            </el-form-item>
          </div>
          <div>
            <el-form-item label="	家长嘱托：">
              <el-input
                v-model="form.customer_remark"
                placeholder="请输入内容"
                :rows="2"
                type="textarea"
              />
            </el-form-item>
          </div>
        </div>
        <div style="width: 50%; margin-left: 40%">
          <el-button type="primary" @click="goBack">返回</el-button>

          <el-button type="primary" @click="Submit('normal')">预约</el-button>
          <el-button type="primary" @click="Submit('occupy')">预占</el-button>
        </div>
      </el-form>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="40%">
      <AddUser @send="closeUserDialog" />
    </el-dialog>
  </div>
</template>

<script>
  import { getDeptLists } from '@/api/addOrganization'
  import { getCusGroup } from '@/api/gustomerGroup'
  import {
    getResSurce,
    getPartakeGroupList,
    getSchedulingUserList,
    getSchedulingList,
    addReservation,
  } from '@/api/reservation'

  // import { getSchedulingLists } from '@/api/scheduling'
  // import { getUserList } from '@/api/public'

  export default {
    components: {
      AddUser: () => import('@/views/charge/components/components/adduser.vue'), // 添加用户
    },
    props: {},
    data() {
      return {
        ruleForm: {
          // 推荐人
          Recommender: '',
          // 家庭组
          Family: '',
          // 联系人
          contacts: '',
          // 用户
          user: '',
          // 科室
          Department: '',
          // 医生
          doctor: '',
          // 日期
          itemData: '',
          // 预约时间段
          timeSlot: '',
          // 预约来源
          appointment: [],
          // 打印小票
          has_print: 'Y',
          // 预约类型
          res_create_type: '',
          // 短信
          message: 'Y',
          // 推迟
          delay: '',
        },
        // 推荐人
        RecommenderOptions: [],
        FamilyOptions: [],
        contactsOptions: [],
        userOptions: [],
        DepartmentOptions: [],
        doctorOptions: [],
        positionOptions: [],
        commodityOptions: [],
        itemDataOptions: [],
        timeSlotOptions: [],
        appointmentOptions: [],
        reservationSourceOptions: [
          {
            value: 'clinic',
            label: '诊所',
          },
          {
            value: 'service',
            label: '客服',
          },
          {
            value: 'customer',
            label: '客户',
          },
          {
            value: 'other',
            label: '其他',
          },
        ],
        PrintOptions: [
          {
            value: 'Y',
            label: '打印',
          },
          {
            value: 'N',
            label: '不打印',
          },
        ],
        messageOptions: [
          {
            value: 'Y',
            label: '通知',
          },
          {
            value: 'N',
            label: '不通知',
          },
        ],
        delayOptions: [
          {
            value: '0',
            label: '0分钟',
          },
          {
            value: '600',
            label: '10分钟',
          },
          {
            value: '1200',
            label: '20分钟',
          },
          {
            value: '1800',
            label: '30分钟',
          },
          {
            value: '2400',
            label: '40分钟',
          },
          {
            value: '3000',
            label: '50分钟',
          },
          {
            value: '3600',
            label: '60分钟',
          },
        ],
        arr: [],
        departmentProps: {
          value: 'id',
          label: 'dept_name',
          children: 'children',
        },
        form: {},
        forms: [],
        formIs: {},
        langs: JSON.parse(window.localStorage.getItem('lang')),
        dialogVisible: false,
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      // 初始化 方法
      init() {
        getCusGroup().then((res) => {
          this.FamilyOptions = res.data
        })
        getDeptLists().then((res) => {
          this.DepartmentOptions = res.data
        })
        getResSurce().then((res) => {
          this.appointmentOptions = res.data
        })
        this.form.has_print = 'Y'
        this.form.has_sms = 'Y'
      },
      // 家庭组
      FamilyChange(e) {
        this.form.res_group_id = e
        this.ruleForm.contacts = ''
        this.ruleForm.user = ''
        this.FamilyOptions.forEach((res) => {
          if (res.group_id == e) {
            this.contactsOptions = res.user
            this.userOptions = res.child
          }
        })
      },
      // 联系人
      contactsChange(e) {
        this.contactsOptions.forEach((res) => {
          if (res.cus_name == e) {
            this.form.customer_tel = res.tel
            this.form.res_customer_id = res.id
          }
        })
        //
      },
      // 用户
      userChange(e) {
        this.form.app_customer_id = e
      },
      // 预约科室
      handleChange(e) {
        this.formIs.dept_id = e
        const params = {
          dept_id: e,
        }
        getPartakeGroupList(params).then((res) => {
          this.positionOptions = res.data
        })
        // getSchedulingLists(params).then((res) => {
        //   this.doctorOptions = res.data
        // })
      },
      // 岗位
      positionChange(e) {
        const params = {
          dept_id: this.formIs.dept_id,
          group_id: e,
        }
        getSchedulingUserList(params).then((res) => {
          this.doctorOptions = res.data
        })
      },
      // 选择科室医生
      doctorChange(index, e) {
        this.doctorOptions.forEach((res) => {
          if (res.user_id == e) {
            this.forms[index].res_user_name = res.real_name
            const params = {
              user_dept_group_id: res.user_dept_group_id,
              user_id: e,
              scheduling_rule: res.scheduling_rule,
            }
            getSchedulingList(params).then((res) => {
              this.commodityOptions = res.data.goods_list
              this.itemDataOptions = res.data.list
            })
          }
        })
      },
      // 选择商品

      commodityChange(index, e) {
        this.commodityOptions.forEach((res) => {
          if (res.id == e) {
            this.forms[index].res_fee = res.res_fee
            this.forms[index].total_fee = res.total_fee
          }
        })
      },
      // 预约日期
      itemDataChange(index, e) {
        this.forms[index].res_time = ''
        this.itemDataOptions.forEach((res) => {
          if (res.scheduling_date == e) {
            this.timeSlotOptions = res.time_list
          }
        })
      },
      // 添加医生
      addTest() {
        this.forms.push({
          dept_id: '',
          group_id: '',
          res_user_id: '',
          goods_id: '',
          res_fee: '',
          res_date: '',
          res_time: '',
          allow_time: '',
          total_fee: '',
          res_user_name: '',
        })
      },

      deleteTest(index) {
        this.forms.splice(index, 1)
      },

      //
      // 预约时间段
      timeSlotChange() {},
      // 类型
      reservationSourceChange(e) {
        this.form.res_create_type = e
      },
      // 预约来源
      appointmentChange(e) {
        this.form.res_source = e
      },
      // 小票
      printChange(e) {
        this.form.has_print = e
      },
      // 短信
      messageChange(e) {
        this.form.has_sms = e
      },
      // 推迟
      delayChange() {
        // this.form.allow_time = e
      },
      // 提交
      Submit(e) {
        const item_data = JSON.stringify(this.forms)
        this.form.item_data = item_data
        this.form.type = e
        addReservation(this.form).then(() => {
          this.goBack()
        })
      },

      delDataClick() {},
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done()
          })
          .catch(() => {})
      },
      // 返回
      goBack() {
        this.$emit('showMain', 0)
      },
      closeUserDialog(e) {
        this.dialogVisible = false
        if (typeof e == 'object') {
          getCusGroup().then((res) => {
            this.FamilyOptions = res.data
            res.data.forEach((k) => {
              if (k.group_id == e.res.data.id) {
                this.contactsOptions = k.user
                console.log(e.res.data.user.id)
                console.log(this.contactsOptions)
                this.userOptions = k.child
                this.form.customer_tel = e.res.data.user.tel
                this.ruleForm.contacts = e.res.data.user.cus_name
                this.form.res_group_id = e.res.data.id
                this.ruleForm.Family = e.res.data.id
                this.ruleForm.user = e.res.data.child.id
                this.form.res_customer_id = e.res.data.user.id
                this.form.app_customer_id = e.res.data.child.id
              }
            })
            this.dialogVisible = false
          })
        }
      },
    },
  }
</script>

<style scoped>
  table.tftable,
  table.table-count {
    font-size: 12px;
    color: #333333;
    width: 100%;
    border-width: 1px;
    border-collapse: collapse;
  }

  table.table-count th,
  table.table-count td {
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    border-width: 1px;
    border-style: solid;
    border-color: #e4e4e4;
    text-align: center;
  }

  table.tftable th,
  table.tftable td {
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #e4e4e4;
    text-align: left;
    text-align: center;
  }

  .tftable {
    margin-left: 1%;
    margin-bottom: 10px;
    margin-top: 10px;
  }
  table.tftable tr:hover {
    background: #c3ecff;
  }
  .tftable > thead > tr:hover {
    background: white;
  }
</style>
